<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>
    <div>
        <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
        <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
        <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
        <input type="button" value="添加" id="add">
    </div>
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick='del(this)'>删除</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick='del(this)'>删除</a></td>
        </tr>

    </table>
</body>
<script>
    //给添加按钮绑定单击事件
    document.querySelector("#add").onclick=function(){
       let name=document.querySelectorAll("input")[0].value;
       let age=document.querySelectorAll("input")[1].value;
       let gender=document.querySelectorAll("input")[2].value;
    
    
      //拼接出一个字符串：<tr>.....
        let tr=`
        <tr>
            <td>${name}</td>
            <td>${age}</td>
            <td>${gender}</td>
            <td><a href="JavaScript:void(0);"  onclick='del(this)'>删除</a></td>
        </tr>`;
        //把字符串追加到table中
        document.querySelector("table").innerHTML += tr;
    }
         // tr.parentNode.removeChild(tr);
         function del(me){
        let tr = me.parentElement.parentElement;
        
        //document.querySelector("table>tbody").removeChild(tr);
        tr.parentNode.removeChild(tr);
    }
     
</script>
</html>